﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Plain & Clean
   
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20111024

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Manage layouts</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" language="javascript" src="scripts/jquery-1.4.1-vsdoc.js"></script>
    <style type="text/css">
        #name
        {
            width: 292px;
        }
        #xml
        {
            height: 408px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header" class="container">
            <div id="logo">
                <h1>
                    <a href="#">Manage Layouts </a>
                </h1>
                <p>
                    Layout list</a></p>
            </div>
            <div id="menu">
                <ul>
                    <li class="current_page_item"><a href="index.htm">Layout list</a></li>
                    <li><a href="EditLayout.htm">Add New</a></li>
                </ul>
            </div>
        </div>
        <div style="clear: both;">
            &nbsp;</div>
        <!-- end #header -->
        <div id="page" class="container">
            <div id="sidebar">
                <ul>
                    <li>
                        <h2>
                            Layouts</h2>
                        <ul id="left">
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- end #sidebar -->
            <!--		<div style="clear: both;">&nbsp;</div>-->
            <div id="content">
                <div class="post">
                    <p>
                        <input id="name" type="text" /><input id="itemid" type="hidden" />
                    </p>
                    <p>
                        <textarea id="xml" cols="60"></textarea>
                    </p>
                    <p>
                        <a id="btnSave" href="#" class="more">Save</a> <a id="btnDelete" href="#" class="more">
                            Delete</a>
                    </p>
                </div>
            </div>
            <!-- end #content -->
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end #page -->
    </div>
    <div id="footer">
        <p>
            Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">
                Free CSS Templates</a>.</p>
    </div>
    <!-- end #footer -->
</body>
<script type="text/javascript">
    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }

    var selected;

    $(document).ready(function () {

        //////////////
        // Fill List
        //
        $.get(location.protocol + '//' + location.host + '/jersey-webapp/webresources/layouts/list', function (data) {
            for (z = 0; z < data.length; z++) {
                var item = data[z];
                var a = $("<a id=\"alistitem" + z + "\"/>");
                a.text(item.name);
                a.attr("ItemId", item.id);
                a.click(function (event) {
                    var id = $("#" + this.id).attr("ItemId");
                    $.get(location.protocol + '//' + location.host +  '/jersey-webapp/webresources/layouts/?id=' + id, function (data) {
                        $("#itemid").val(data.id);
                        $("#name").val(data.name);
                        $("#xml").val(data.text);
                    });
                    selected = this.id;

                    event.preventDefault();
                });
                $("#left").append($('<li />').append(a));
            }
        });

        //////////////
        // Save button
        //
        $("#btnSave").click(function (event) {
            if (selected != null) {
                var data = new Object();

                data.id = $("#itemid").val();
                data.name = $("#name").val();
                data.text = $("#xml").val();

                $.ajax({
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    dataType: 'json',
                    success: function (data2) {
                        $("#" + selected).text(data.name);
                    },
                    error: function () {
                        alert("Update Failed");
                    },
                    processData: false,
                    type: 'POST',
                    url: location.protocol + '//' + location.host +  '/jersey-webapp/webresources/layouts/'
                });
            }
            event.preventDefault();
        });

        //////////////
        // Delete button
        //
        $("#btnDelete").click(function (event) {
            if (selected != null) {
                var id = $("#itemid").val();
                $.ajax({
                    contentType: 'application/json',
                    data: null,
                    dataType: 'json',
                    success: function (data) {
                        $("#" + selected).remove();
                        selected = null;
                        $("#itemid").val('');
                        $("#name").val('');
                        $("#xml").val('');
                    },
                    error: function () {
                        alert("Update Failed");
                    },
                    processData: false,
                    type: 'DELETE',
                    url: location.protocol + '//' + location.host +  '/jersey-webapp/webresources/layouts/?id=' + id
                });
            }
            event.preventDefault();
        });
    });
</script>
</html>
